<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap页脚样式示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        
        .footer-example {
            margin-bottom: 4rem;
            padding: 2rem 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .footer-title {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #eee;
            font-weight: 600;
        }
        
        /* 通用footer样式 */
        .footer {
            width: 100%;
        }
        
        .footer-link {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .footer-link:hover {
            color: #0d6efd;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-5">Bootstrap页脚样式示例</h1>
        
        <!-- 示例1: 基础信息型页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">1. 基础信息型页脚</h3>
            <footer class="footer bg-light py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">关于我们</h5>
                            <p class="text-muted">我们致力于提供高质量的服务和产品，为用户创造更好的体验。成立于2010年，拥有多年行业经验。</p>
                        </div>
                        <div class="col-md-3">
                            <h5 class="mb-3">快速链接</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">首页</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">产品</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">服务</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">联系我们</a></li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h5 class="mb-3">联系我们</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-map-marker-alt me-2 text-primary"></i>北京市朝阳区XX街道</li>
                                <li class="mb-2"><i class="fas fa-phone me-2 text-primary"></i>+86 123 4567 8910</li>
                                <li class="mb-2"><i class="fas fa-envelope me-2 text-primary"></i>contact@example.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row mt-4 pt-4 border-top">
                        <div class="col text-center text-muted">
                            <p>&copy; 2023 公司名称. 保留所有权利.</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 示例2: 社交媒体型页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">2. 社交媒体型页脚</h3>
            <footer class="footer bg-dark text-white py-5">
                <div class="container">
                    <div class="row text-center">
                        <div class="col-12 mb-4">
                            <h4 class="mb-3">关注我们</h4>
                            <div class="d-flex justify-content-center gap-3">
                                <a href="#" class="social-icon bg-primary text-white">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="#" class="social-icon bg-info text-white">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="social-icon bg-danger text-white">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                <a href="#" class="social-icon bg-success text-white">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                                <a href="#" class="social-icon bg-warning text-white">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 offset-md-3">
                            <p class="mb-4">订阅我们的新闻通讯，获取最新资讯和优惠信息</p>
                            <form class="d-flex">
                                <input type="email" class="form-control me-2" placeholder="您的邮箱地址" required>
                                <button type="submit" class="btn btn-primary">订阅</button>
                            </form>
                        </div>
                    </div>
                    <div class="row mt-5 pt-4 border-top border-secondary">
                        <div class="col-md-6">
                            <p>© 2023 品牌名称. 保留所有权利.</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <a href="#" class="footer-link me-3">隐私政策</a>
                            <a href="#" class="footer-link me-3">服务条款</a>
                            <a href="#" class="footer-link">Cookie政策</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 示例3: 多列导航型页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">3. 多列导航型页脚</h3>
            <footer class="footer bg-light py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">公司</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">关于我们</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">我们的团队</a></li>
                                <li class="mb-2"><a href="#" class="footer-link"> careers</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">新闻中心</a></li>
                            </ul>
                        </div>
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">产品</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">产品系列</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">新品上市</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">促销活动</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">配件</a></li>
                            </ul>
                        </div>
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">支持</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">帮助中心</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">联系客服</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">常见问题</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">售后服务</a></li>
                            </ul>
                        </div>
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">资源</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">博客</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">教程</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">文档</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">社区</a></li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h5 class="mb-3">联系我们</h5>
                            <p class="mb-3">有任何问题或建议，请随时与我们联系</p>
                            <div class="d-flex gap-3 mb-4">
                                <a href="#" class="social-icon bg-light border text-primary">
                                    <i class="fab fa-weixin"></i>
                                </a>
                                <a href="#" class="social-icon bg-light border text-primary">
                                    <i class="fab fa-weibo"></i>
                                </a>
                                <a href="#" class="social-icon bg-light border text-primary">
                                    <i class="fab fa-qq"></i>
                                </a>
                            </div>
                            <p><i class="fas fa-envelope me-2 text-primary"></i> support@example.com</p>
                        </div>
                    </div>
                    <div class="row mt-5 pt-4 border-top">
                        <div class="col text-center text-muted">
                            <p>© 2023 公司名称. 保留所有权利.</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 示例4: 简约型页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">4. 简约型页脚</h3>
            <footer class="footer py-4 bg-white border-top">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-logo text-primary fs-2 me-2"></i>
                                <span class="fw-bold fs-5">品牌名称</span>
                            </div>
                            <p class="text-muted mt-2">为用户创造价值，让世界更美好</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <div class="d-flex justify-content-md-end gap-4 mb-3">
                                <a href="#" class="footer-link"><i class="fab fa-facebook-f"></i></a>
                                <a href="#" class="footer-link"><i class="fab fa-twitter"></i></a>
                                <a href="#" class="footer-link"><i class="fab fa-instagram"></i></a>
                                <a href="#" class="footer-link"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                            <div class="text-muted">
                                © 2023 品牌名称. 保留所有权利.
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 示例5: 带订阅功能的页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">5. 带订阅功能的页脚</h3>
            <footer class="footer bg-primary text-white py-5">
                <div class="container">
                    <div class="row mb-5">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h3 class="mb-3">订阅我们的通讯</h3>
                            <p class="mb-4">获取最新的产品信息、优惠活动和行业资讯</p>
                            <form class="d-flex flex-column sm:flex-row gap-2 max-w-lg mx-auto">
                                <input type="email" class="form-control" placeholder="您的邮箱地址" required>
                                <button type="submit" class="btn btn-light text-primary">立即订阅</button>
                            </form>
                            <p class="text-sm mt-3 text-primary-200">我们尊重您的隐私，不会向第三方分享您的信息</p>
                        </div>
                    </div>
                    <div class="row mb-5">
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">关于我们</h5>
                            <p>我们是一家专注于提供高质量产品和服务的公司，致力于满足客户的需求和期望。</p>
                        </div>
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">快速链接</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">首页</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">产品</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">服务</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">联系我们</a></li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h5 class="mb-3">联系方式</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区XX大厦</li>
                                <li class="mb-2"><i class="fas fa-phone me-2"></i>+86 10 8765 4321</li>
                                <li class="mb-2"><i class="fas fa-envelope me-2"></i>info@example.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row pt-4 border-top border-primary-300">
                        <div class="col-md-6">
                            <p>&copy; 2023 公司名称. 保留所有权利.</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <a href="#" class="footer-link me-3">隐私政策</a>
                            <a href="#" class="footer-link">使用条款</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 示例6: 带支付方式的电商型页脚 -->
        <div class="footer-example bg-white">
            <h3 class="footer-title">6. 电商型页脚</h3>
            <footer class="footer bg-light py-5">
                <div class="container">
                    <div class="row mb-5">
                        <div class="col-md-3 mb-4">
                            <h5 class="mb-3">客户服务</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">帮助中心</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">订单查询</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">配送信息</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">退换货政策</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">联系客服</a></li>
                            </ul>
                        </div>
                        <div class="col-md-3 mb-4">
                            <h5 class="mb-3">关于我们</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="#" class="footer-link">公司简介</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">实体店铺</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">招贤纳士</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">隐私政策</a></li>
                                <li class="mb-2"><a href="#" class="footer-link">用户协议</a></li>
                            </ul>
                        </div>
                        <div class="col-md-3 mb-4">
                            <h5 class="mb-3">支付方式</h5>
                            <div class="d-flex flex-wrap gap-2">
                                <i class="fab fa-cc-visa fs-2"></i>
                                <i class="fab fa-cc-mastercard fs-2"></i>
                                <i class="fab fa-cc-paypal fs-2"></i>
                                <i class="fab fa-cc-amex fs-2"></i>
                                <i class="fab fa-alipay fs-2"></i>
                                <i class="fab fa-weixin fs-2"></i>
                            </div>
                            <h5 class="mb-3 mt-4">配送方式</h5>
                            <div class="d-flex gap-2">
                                <i class="fas fa-truck fs-2"></i>
                                <i class="fas fa-shipping-fast fs-2"></i>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <h5 class="mb-3">下载我们的APP</h5>
                            <p class="mb-3">扫描二维码，下载APP享受更多优惠</p>
                            <div class="bg-white p-2 w-50 mb-3">
                                <!-- 这里是二维码占位 -->
                                <div class="bg-light text-center py-5">二维码</div>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="fab fa-apple me-1"></i> App Store
                                </a>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="fab fa-android me-1"></i> Google Play
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row pt-4 border-top">
                        <div class="col text-center text-muted">
                            <p>© 2023 电商平台名称. 保留所有权利. 京ICP备12345678号</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
    
